<template>
  <div>
    <a-drawer :visible="visible" centered :width="modalWidth" @close="close" :closable="false" title="商品详情" placement="right" :destroyOnClose="true" id="version-drawer">
      <div class="info">
        <a-row :gutter="36">
          <a-col :lg="11" :xs="24">
            <div class="skc-carousel" v-if="skcList.length > 0">
              <!-- Swiper -->
              <div class="thumb-example">
                <!-- swiper1 -->
                <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
                  <swiper-slide v-for="(item, index) in skcList" :key="index" class="slide">
                    <img :src="item ? item : 'https://img.bzhz.jnbygroup.com/cloth.png'" @click="bigImg(index, skcList)" style="cursor: pointer" />
                  </swiper-slide>
                  <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                  <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
                </swiper>
                <!-- swiper2 Thumbs -->
                <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
                  <swiper-slide v-for="(item, index) in skcList" :key="index" class="slide">
                    <img :src="item ? item : 'https://img.bzhz.jnbygroup.com/cloth.png'" />
                  </swiper-slide>
                </swiper>
              </div>
            </div>
            <div class="skc-carousel" v-else>
              <img :src="proInfo.skus.length > 0 && proInfo.skus[0].imgurl ? proInfo.skus[0].imgurl : 'https://img.bzhz.jnbygroup.com/cloth.png'" alt="" class="no-img" />
            </div>
            <!-- <a-col :lg="24" :xs="20">
              <div class="img"> -->
            <!-- <img :src="proInfo.skus.length > 0 && proInfo.skus[0].imgurl ? proInfo.skus[0].imgurl : 'https://img.bzhz.jnbygroup.com/cloth.png'" alt="" /> -->
            <!-- <img :src="proInfo.skus[0].imgurl" alt="" v-if="proInfo.skus.length > 0 && proInfo.skus[0].imgurl !== ''" /> -->
            <!-- <img src="https://img.bzhz.jnbygroup.com/cloth.png" alt="" v-else /> -->
            <!-- </div>
            </a-col> -->
          </a-col>
          <a-col :lg="13" :xs="24">
            <div class="content">
              <a-descriptions title="商品信息" :column="{ lg: 2, sm: 2 }">
                <a-descriptions-item label="款号">
                  {{ proInfo.name }}
                </a-descriptions-item>
                <a-descriptions-item label="品名">
                  {{ proInfo.value }}
                </a-descriptions-item>
                <a-descriptions-item label="品牌">
                  {{ proInfo.brand }}
                </a-descriptions-item>
                <a-descriptions-item label="年份">
                  {{ proInfo.year }}
                </a-descriptions-item>
                <a-descriptions-item label="吊牌价">
                  <span class="red">¥ {{ proInfo.price }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="颜色">
                  <span v-if="proInfo.skus.length > 0">{{ proInfo.skus[0].colorno }}</span>
                  <span v-else>--</span> / <span v-if="proInfo.skus.length > 0">{{ proInfo.skus[0].color_name }}</span>
                  <span v-else>--</span>
                </a-descriptions-item>
                <a-descriptions-item label="小季节">
                  {{ proInfo.small_season }}
                </a-descriptions-item>
                <!-- <a-descriptions-item label="大季节">
                  {{ proInfo.big_season }}
                </a-descriptions-item>
                <a-descriptions-item label="款式成分">
                  {{ proInfo.mark_style }}
                </a-descriptions-item> -->
                <a-descriptions-item label="主题">
                  {{ proInfo.topic }}
                </a-descriptions-item>
                <a-descriptions-item label="波段">
                  {{ proInfo.m_band }}
                </a-descriptions-item>
                <a-descriptions-item label="大类">
                  <span>{{ proInfo.m_big_category }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="小类">
                  <span>{{ proInfo.m_small_category }}</span>
                </a-descriptions-item>
                <!-- <a-descriptions-item label="主题">
            </a-descriptions-item> -->
                <a-descriptions-item label="成分面料">
                  <span v-if="proInfo.mark_style">{{ proInfo.mark_style }}</span>
                  <span v-else>--</span>
                </a-descriptions-item>
                <!-- <a-descriptions-item label="条码ID">
            </a-descriptions-item>
            <a-descriptions-item label="条码">
            </a-descriptions-item>
            <a-descriptions-item label="国际码">
            </a-descriptions-item>
            <a-descriptions-item label="风格标签">
            </a-descriptions-item> -->
                <!-- <a-descriptions-item label="图片地址">
              <a-tooltip v-if="proInfo.skus.length > 0 && proInfo.skus[0].imgurl !== ''">
                <template slot="title">{{ proInfo.skus[0].imgurl }}</template>
                <span style="word-break:break-all;">{{ proInfo.skus[0].imgurl }}</span>
              </a-tooltip>
              <span v-else>--</span>
            </a-descriptions-item> -->
              </a-descriptions>
              <a-button v-if="!isBox" @click="sendSingleProduct($event)" type="primary" :disabled="!isSend">发送商品</a-button>
            </div>
          </a-col>
        </a-row>
      </div>
      <section class="info-tag" style="padding-top: 8px">
        <h3 class="ant-descriptions-title">商品标签</h3>
        <ul class="tags-list" v-if="hasTags(rootTags)">
          <li v-for="(item, index) in rootTags" :key="item.id" v-show="item.tags && item.tags.length > 0">
            <div class="tags">
              <p>
                <span class="title">{{ item.name }}:</span>
                <span class="content">
                  <a-tag color="blue" v-for="value in item.tags" :key="value.key">
                    {{ value.value }}
                  </a-tag>
                </span>
              </p>
            </div>
          </li>
        </ul>
        <p v-else>暂无商品标签</p>
      </section>
      <section style="padding-top: 12px">
        <h3 class="ant-descriptions-title">FAB话术 <a-icon type="copy" @click="copy('fab')" style="color: #1890ff" :data-clipboard-text="proInfo.salesTalk" id="fab" v-if="proInfo.salesTalk" /></h3>
        <p v-if="proInfo.salesTalk" style="white-space: pre-wrap" v-html="proInfo.salesTalk"></p>
        <p v-else>暂无FAB话术</p>
      </section>
      <div class="info-img" v-if="detailImg.length > 0">
        <img :src="item" v-for="(item, index) in detailImg" :key="index" alt="" />
      </div>
      <div class="info-img no-info-img" v-else>
        <a-empty>
          <span slot="description"> 暂无详情图 </span>
        </a-empty>
      </div>
      <a-back-top :target="targetFn" :visibilityHeight="300" />
    </a-drawer>
    <BigImg :visibleImgs="visibleImgs" :imgList="bigImgList" :goToIndex="goToIndex" @closeBig="closeBig"></BigImg>
  </div>
</template>
<script>
import { goodsDetail, queryWeMoProductIds } from '@/api/box/workbench'
import { batchGetProductPromotionPrice } from '@/api/box/api'
import { batchSysCateByIds } from '@/api/goods'
import { getAction } from '@/api/manage'
import BigImg from '@/views/box/components/UserMsg/bigImg'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import Clipboard from 'clipboard'

export default {
  props: {
    modalWidth: {
      type: [String, Number],
      default: '60vw',
      required: false
    },
    isBox: {
      type: Boolean,
      default: true,
      required: false
    },
    weid: {
      type: [String, Number],
      default: null,
      required: false
    }
  },
  components: {
    Swiper,
    SwiperSlide,
    BigImg
  },
  data() {
    return {
      visible: false,
      proInfo: {
        skus: []
      },
      detailImg: [],
      img: '',
      isSend: true,
      tags: [],
      rootTags: [],
      swiperOptionTop: {
        loop: false,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        // 左右两边的点击事件
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: false, // 是否可循环
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10, // 缩略图之间的间隙大小
        centeredSlides: true, // 大图对应的缩略图位置显示在中间
        slidesPerView: 5, // 每一页显示下方缩略图的数量，auto ：自动显示所有数量；输入number（如1、2、3等）则是手动定义显示的数量
        touchRatio: 0.2, // 触控比例，可理解为拖动缩略图的距离，默认值为1
        slideToClickedSlide: true //点击其他缩略图可跳转
      },
      skcList: [],
      visibleImgs: false,
      bigImgList: [],
      goToIndex: 0
    }
  },
  watch: {},
  computed: {
    hasTags() {
      return list => {
        let result = list.filter(item => item.tags && item.tags.length > 0)
        return result.length ? true : false
      }
    },
    transS() {
      return str => {
        let s = str.replace('\n', '<br>')
        console.log(s)
        return s
      }
    }
  },
  methods: {
    async show(productId, skuId, send) {
      this.visible = true
      const data = {
        requestData: {
          productId: productId,
          skuId: skuId
        }
      }

      await goodsDetail(data)
        .then(res => {
          if (res.code === 0) {
            this.proInfo = res.data
            if (res.data.detail_imgs) {
              this.detailImg = res.data.detail_imgs.split(',')
            }

            // this.$emit('openInfo', true, res.data, '商品库')
            console.log(this.isBox)
            if (!this.isBox) {
              let spuList = []
              let obj = {}
              obj.spuId = res.data.id
              spuList.push(obj)
              if (spuList.length > 0) {
                this.getProductPromotionPrice(spuList)
              }
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('查看商品信息:' + err)
        })
      await this.fetchOriginTags()
      if (this.proInfo.label_levels && this.proInfo.label_levels.length > 0) {
        await this.fetchTags(this.proInfo.labels)
      } else {
        this.tags = []
      }
      this.handleRootTags()

      // weimo发送商品
      if (!this.isBox) {
        if (send == false) {
          this.isSend = false
        } else {
          this.isSend = true
        }
      }
    },
    // 查询促销价格
    getProductPromotionPrice(list) {
      let data = {
        requestData: {
          productList: list,
          unionId: this.unionId
        }
      }
      batchGetProductPromotionPrice(data)
        .then(res => {
          if (res.code == 0) {
            this.proInfo.promotionPrice = res.data.productList[0].promotionPrice.toFixed(2)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('ProductPromotionPrice:' + err)
        })
    },
    // 批量查询sku库存 for:POS+
    getSkuStock(skuIds, storeId, weid) {
      const data = {
        requestData: {
          storeId: storeId,
          skuIds: skuIds,
          weId: weid
        }
      }
      return queryStock(data)
        .then(res => {
          if (res.code === 0) {
            return res.data
          } else {
            this.$message.error(res.msg)
            return false
          }
        })
        .catch(err => {
          console.log('getSkuStock:' + err)
        })
    },
    close() {
      this.visible = false
      this.proInfo = {
        skus: []
      }
      this.detailImg = []
    },
    // 微盟商品Id
    getwemoIds(list) {
      let params = {
        requestData: {
          storeId: '417608-31066',
          productIdList: list
        }
      }
      if (this.weid) params.requestData.weid = this.weid
      return queryWeMoProductIds(params).then(res => {
        if (res.code == 0) {
          return res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    async sendSingleProduct(e) {
      let list = await this.getwemoIds([this.proInfo.id])
      if (list.length > 0) {
        let obj = {
          weiMoProductId: list[0].weMoProductId,
          value: this.proInfo.value,
          cover_imgs: this.proInfo.cover_imgs,
          promotionPrice: this.proInfo.promotionPrice
        }
        console.log(obj)
        e.target.firstElementChild.innerText = '再次发送'
        this.$emit('sendProduct', obj)
      } else {
        this.$message.warning('暂无微盟id')
      }
    },
    // 全部商品标签大类
    fetchOriginTags() {
      let params = {
        parentIds: '1425340611200561154'
      }
      return getAction('/sys/category/getChildListBatch', params).then(res => {
        if (res.success) {
          this.rootTags = res.result.records
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 查询商品标签
    fetchTags(codes) {
      let params = {
        code: codes
      }
      return batchSysCateByIds(params).then(res => {
        if (res.code == 0) {
          this.tags = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleRootTags() {
      // console.log(this.permisTree, this.tags, this.rootTags)

      for (let item of this.rootTags) {
        const code = item.code
        // 含有的tags
        if (this.tags.length > 0) {
          const result = this.tags.filter(v => v.key.includes(code))
          item.tags = result
        } else {
          item.tags = []
        }
        // 编辑权限
        /* if (this.permisTree && this.permisTree.length > 0) {
          if (this.rootTags.length == this.permisTree.length) {
            item.hasPremission = true
          } else {
            let premisList = this.permisTree.map(e => e.code)
            const res = premisList.filter(v => v == code)
            if (res.length > 0) {
              item.hasPremission = true
            } else {
              item.hasPremission = false
            }
          }
        } else {
          item.hasPremission = false
        } */
      }
      this.$forceUpdate()
      // console.log(this.rootTags)
    },
    // swiper
    handleSwiper() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.$swiper
        const swiperThumbs = this.$refs.swiperThumbs.$swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
    },
    // 查看大图
    bigImg(index, list) {
      this.visibleImgs = true
      this.goToIndex = index
      this.bigImgList = list
    },
    // 关闭大图弹窗
    closeBig(value) {
      this.visibleImgs = value
    },
    targetFn() {
      return document.querySelector('#version-drawer .ant-drawer-wrapper-body')
    },
    copy(id) {
      let tag = `#${id}`
      var clipboard = new Clipboard(tag)
      clipboard.on('success', e => {
        console.log(e)
        this.$message.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.log(e)
        // 不支持复制
        console.log('复制失败')
        // 释放内存
        clipboard.destroy()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.info {
  // display: flex;
  .img {
    width: 100%;
    img {
      width: 100%;
      // height: 60vh;
      object-fit: scale-down;
      background: #fff;
    }
  }
  .content {
    // width: 50%;
    padding-top: 24px;
    padding-left: 24px;
    box-sizing: border-box;
    .red {
      color: #f45555;
    }
  }
}
.info-img {
  padding-top: 48px;
  width: 100%;
  margin-bottom: 24px;
  img {
    display: block;
    margin: 0 auto;
    max-width: 700px;
    width: 100%;
  }
}
.no-info-img {
  padding-top: 96px;
}
.ant-descriptions-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}
// tags
.tags-list {
  padding-left: 0;
  li {
    list-style-type: none;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 20px;
    width: 100%;
    .tags {
      width: 100%;
      display: flex;
      justify-content: space-between;
      p {
        display: flex;
        width: 92%;
      }
      .title {
        width: 80px;
        display: block;
      }
      .content {
        width: calc(100% - 80px);
      }
      .ant-tag {
        margin-bottom: 8px;
      }
    }
  }
}

.skc-carousel {
  .carousel-imgs {
    width: 100%;
    overflow: hidden;
    img {
      height: 80%;
      width: 80%;
      object-fit: scale-down;
      margin: 0 auto;
    }
  }
  .dots-imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 5px;
  }
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
  }
  /deep/ .slick-dots-bottom {
    bottom: 0px;
    height: initial;
    display: flex !important;
    width: 100%;
    overflow: hidden;
    padding: 0 24px;
    overflow-x: auto;
    li {
      margin: 0 5px;
    }
  }
  .no-img {
    width: 90%;
    object-fit: scale-down;
    margin: 0 auto;
  }
}
</style>

